<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>使用backdrop-filter box-shadow 实现好看的登录</title>
	</head>
	<style>
		html,
		body {
			height: 100%;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background: #000;
		}

		.container {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 800px;
			height: 800px;
			/* background-color: teal; */
			/* border-bottom-left-radius: 40px 100%; */
			/* border-bottom-right-radius: 40px 100%; */
		}

		.glass {
			position: absolute;
			width: 380px;
			height: 480px;
			top: 160px;
			left: 220px;
			color: #eee;
			background: rgba(255, 255, 255, 0.05);
			/* TODO  被设置了该 css 样式的元素遮住的部分会呈现模糊状态，*/
			backdrop-filter: blur(4px);
			box-shadow:
				inset 1px 1px 6px rgba(255, 255, 255, 0.3),
				2px 2px 15px rgba(0, 0, 0, 0.5);
			animation: anim3 ease-out 1s 0.2 backwards;
			transition: 0.5s;
			border-radius: 20px;
		}

		.glass:hover {
			box-shadow:
				inset 1px 1px 3px rgba(255, 255, 255, 0.9),
				4px 4px 25px rgba(0, 0, 0, 0.9);
			backdrop-filter: blur(7px);
		}

		.bg {
			position: absolute;
			width: 800px;
			height: 800px;
			top: 0;
			left: 0;
			animation: anim2 ease-out 1s;
		}

		input {
			background: transparent;
			outline: none;
			border: none;
			border-bottom: 1px solid #666;
			width: 80%;
			height: 45px;
			color: #eee;
			font-size: 18px;
			margin-left: 34px;
			margin-top: 40px;
		}

		.text {
			display: inline-block;
			font-size: 26px;
			margin: 50px 0 0 34px;
		}

		button {
			border: none;
			width: 70px;
			height: 70px;
			border-radius: 50%;
			color: #eee;
			font-weight: bold;
			font-size: 28px;
			margin-left: 143px;
			margin-top: 71px;
			cursor: pointer;
			background: rgba(255, 255, 255, 0.1);
			box-shadow: 0px 2px 10px #111;
			transition: 0.5s;
		}

		button:hover {
			width: 160px;
			border-radius: 70px;
			margin-left: 105px;
			box-shadow:
				0px 0px 10px #999,
				inset 0px 0px 5px #333;
		}

		span {
			background: #fff;
			position: absolute;
			top: 117px;
			left: 143px;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			box-sizing: 1px 1px 50px #000;
		}

		span:nth-child(1) {
			top: 117px;
			left: 143px;
			width: 120px;
			height: 120px;
			background: purple;
			animation: anim1 ease-in-out 3s infinite alternate;
		}

		span:nth-child(2) {
			top: 518px;
			left: 434px;
			width: 200px;
			height: 200px;
			background: orange;
			animation: anim1 4s ease-in-out infinite alternate-reverse;
		}

		span:nth-child(3) {
			top: 196px;
			left: 483px;
			width: 60px;
			height: 60px;
			background: cyan;
			animation: anim1 2.5s ease-in-out 0.5s infinite alternate;
		}

		@keyframes anim1 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-30px);
			}
		}

		@keyframes anim2 {
			0% {
				transform: scale(0) rotate(60deg);
			}

			100% {
				transform: scale(1) rotate(0deg);
			}
		}

		@keyframes anim3 {
			0% {
				transform: translateY(8px);
				opacity: 0;
			}

			100% {
				transform: translateY(0px);
				opacity: 1;
			}
		}
	</style>

	<body>
		<div class="container">
			<div class="bg">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="glass">
				<div class="text">login</div>
				<input type="text" placeholder="Userid" />
				<input type="password" placeholder="Password" />
				<button>→</button>
			</div>
		</div>
	</body>
</html>
